{% extends "base.html" %}

{% block subtitle %}
  Dashboard
{% endblock subtitle %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      My Explorations
    </li>
  </ul>

  <style>
    html, body {
      background-color: #eee;
    }
  </style>
{% endblock navbar_breadcrumb %}

{% block local_top_nav_options %}
  <ul class="nav navbar-nav oppia-navbar-nav navbar-right ng-cloak" ng-controller="CreateExplorationButton">
    <li>
      <div class="oppia-navbar-button-container" style="margin-right: 25px;">
        <a class="btn oppia-navbar-add-exploration-button protractor-test-create-exploration oppia-transition-200"
           ng-click="showCreateExplorationModal()" style="margin-right: 0;">
          <span class="oppia-navbar-add-exploration-button-plus">+</span>
          <span>Create Exploration</span>
        </a>
      </div>
    </li>
  </ul>
{% endblock local_top_nav_options %}

{% block content %}
  <div class="oppia-dashboard-container" ng-controller="MyExplorations">

    <h2 class="oppia-page-heading">My Explorations</h2>

    <div ng-if="explorationsList.length > 0">
      <ul class="oppia-dashboard-tiles">
        <li ng-repeat="exploration in explorationsList">
          <md-card layout="row" class="oppia-dashboard-tile protractor-test-gallery-tile">
            <a ng-href="/create/<[exploration.id]>" class="oppia-gallery-tile-container-link" style="text-decoration: none;">
              <div class="oppia-dashboard-tile-metadata-parent hidden-xs">
                <div class="oppia-dashboard-tile-metadata">
                  Created: <span style="color: black;"><[getLocaleAbbreviatedDatetimeString(exploration.created_on)]></span>

                  <br>

                  <div ng-show="exploration.num_total_threads == 0">
                    <br>
                  </div>
                  <div ng-show="exploration.num_total_threads > 0">
                    Feedback:
                    <span style="color: black;">
                      <[exploration.num_total_threads]>
                      <span ng-if="exploration.num_open_threads > 0">
                        (<[exploration.num_open_threads]> unresolved)
                      </span>
                    </span>
                  </div>
                  <br>

                  Status:
                  <span ng-if="exploration.num_open_threads > 0 && exploration.status !== 'private'">
                    <span class="oppia-dashboard-status-orange">
                      Unresolved Feedback
                    </span>
                  </span>
                  <span ng-if="exploration.num_open_threads == 0 && exploration.status !== 'private'">
                    <span class="oppia-dashboard-status-green">
                      Good
                    </span>
                  </span>
                  <span ng-if="exploration.status === 'private'">
                    <span class="oppia-dashboard-status-grey">
                      Private
                    </span>
                  </span>
                </div>
              </div>
              <div class="oppia-gallery-tile-contents">
                <span class="oppia-gallery-tile-image-container" style="position: absolute;">
                  <!-- TODO(sll): Make the default image higher-res. -->
                  <img class="oppia-gallery-tile-image" ng-src="<[exploration.thumbnail_image_url]>">
                </span>

                <div class="oppia-gallery-tile-details">
                  <div class="oppia-gallery-tile-first-row">
                    <span class="oppia-gallery-tile-title protractor-test-gallery-tile-title">
                      <[exploration.title]>
                    </span>
                    <span style="font-weight: bold;">&middot;</span>
                    <span style="color: #888; font-size: 0.9em;" class="protractor-test-exploration-objective">
                      <span ng-if="exploration.objective">
                        <[getFormattedObjective(exploration.objective)]>
                      </span>
                      <span ng-if="!exploration.objective">
                        <em>No objective specified.</em>
                      </span>
                    </span>
                  </div>

                  <div class="oppia-gallery-tile-second-row">
                    <span style="color: #888">
                      <strong><[exploration.category]></strong>
                      <span style="font-weight: bold;">&middot;</span>
                      Last updated <[getLocaleAbbreviatedDatetimeString(exploration.last_updated)]>
                    </span>
                    <span ng-if="exploration.status === 'publicized'">
                      <span style="font-weight: bold;">&middot;</span>
                      <span style="color: #888">Featured</span>
                    </span>
                    <span ng-if="areRatingsShown(exploration.ratings)">
                      <span style="font-weight: bold;">&middot;</span>
                      <span class="oppia-gallery-tile-ratings">
                        <rating-from-frequencies rating-frequencies="exploration.ratings"></rating-from-frequencies>
                      </span>
                    </span>
                  </div>

                </div>
              </div>
            </a>
          </md-card>
        </li>
      </ul>
    </div>

    <div ng-if="explorationsList.length === 0">
      <p>
        <em>You currently aren't managing or collaborating on any explorations.</em>
      </p>
    </div>
  </div>

  {% include 'components/exploration_creation_button.html' %}
  {% include 'components/ratings.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('components/ratings.js') }}
    {{ include_js_file('dashboard/MyExplorations.js') }}
  </script>
{% endblock footer_js %}
